<template>
  <div class="blog-list-container" ref="mainContainer" v-loading="isLoading">
    <ul>
      <li v-for="item in data.rows" :key="item.id">
        <div class="thumb" v-if="item.thumb">
          <router-link
            :to="{
              name: 'BlogDetail',
              params: {
                id: item.id
              }
            }"
          >
            <img
              v-lazy="item.thumb"
              :alt="item.title"
              :title="item.title"
            />
          </router-link>
        </div>
        <div class="main">
          <router-link
            :to="{
              name: 'BlogDetail',
              params: {
                id: item.id
              }
            }"
          >
            <h2>{{ item.title }}</h2>
          </router-link>
          <div class="aside">
            <span>发表时间：{{ formatDate(item.createDate) }}</span>
            <span>浏览：{{ item.scanNumber }}</span>
            <span>评论：{{ item.commentNumber }}</span>
            <router-link 
              :to="{
                name: 'CategoryBlog',
                params: {
                  categoryId: item.category.id
                }
              }">
              {{ item.category.name }}
            </router-link>
          </div>
          <div class="desc">
            {{ item.description }}
          </div>
        </div>
      </li>
    </ul>
    <!-- 分页 -->
     <Pager
      v-if="data.total"
      :current="routeInfo.page"
      :total="data.total"
      :limit="routeInfo.limit"
      :visibleNumber="10"
      @pageChange="handlePageChange"
     >
     </Pager>
  </div>
</template>

<script>
import Pager from "@/components/Pager"
import fetchData from "@/mixins/fetchData";
import { getBlogs } from "@/api/blog";
import { formatDate } from "@/utils";
import mainScroll from "@/mixins/mainScroll";
export default {
  mixins: [fetchData({}), mainScroll("mainContainer", "BlogList")],
  components: {
    Pager
  },
  computed: {
    // 获取路由信息
    routeInfo() {
      const categoryId = +this.$route.params.categoryId || -1
      const page = +this.$route.query.page || 1
      const limit = +this.$route.query.limit || 10
      return {
      categoryId,
      page,
      limit
    }
    }
  },
  methods: {
    formatDate,
    async fetchData() {
      const resp = await getBlogs(this.routeInfo.page, this.routeInfo.limit, this.routeInfo.categoryId)
      return resp
    },
    handlePageChange(newPage) {
      const query = {
        page: newPage,
        limit: this.routeInfo.limit
      }
      if (this.routeInfo.categoryId === -1) {
        this.$router.push({
          name: "Blog",
          query: query
        })
      } else {
        this.$router.push({
          name: "CategoryBlog",
          query: query,
          params: {
            categoryId: this.routeInfo.categoryId
          }
        })
      }
    },
  },
  watch: {
    $route: {
      async handler() {
        this.isLoading = true
        this.$refs.mainContainer.scrollTop = 0
        this.data = await this.fetchData()
        this.isLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/var.scss";
.blog-list-container {
  line-height: 1.7;
  position: relative;
  padding: 20px;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: flex;
  padding: 15px 0;
  border-bottom: 1px solid $gray;
  .thumb {
    flex: 0 0 auto;
    margin-right: 15px;
    img {
      display: block;
      max-width: 200px;
      border-radius: 5px;
    }
  }
  .main {
    flex: 1 1 auto;
    h2 {
      margin: 0;
    }
  }
  .aside {
    font-size: 12px;
    color: $gray;
    span {
      margin-right: 15px;
    }
  }
  .desc {
    margin: 15px 0;
    font-size: 14px;
  }
    }
  }
}
</style>